import React, { useState, useEffect } from "react";
import axios from "axios";
import { DatePicker } from "antd";

import AddressComponent from "../addresscomponent";
import OtherComponent from "../othercomponents";

import "./index.css";
import InterIP from '../../IP/IP'
const { RangePicker } = DatePicker;

function onChange(value, dateString) {
  console.log("Selected Time: ", value);
  console.log("Formatted Selected Time: ", dateString);
}

function onOk(value) {
  console.log("onOk: ", value);
}

export default function ConfirmOrderNoarea() {
  const [goods, setGoods] = useState([]);
  const [count, setCount] = useState(1);

  useEffect(() => {
let IP = InterIP().props.children;
    axios
      .post("http://" + IP + ":3000/index/cart", {
        user_id: document.cookie.split("=")[1],
      })
      .then((res) => {
        setGoods((goods) => (goods = res.data));
      });
  }, []);
  console.log(goods);

  // 点击累加
  function subNum() {
    if (count === 1) {
      return;
    } else {
      setCount((count) => count - 1);
    }
  }
  // 点击累减
  function addNum() {
    setCount((count) => count + 1);
  }

  return (
    <div className="tyc_confirmorder">
      <div className="tyc_address">
        <ul className="tyc_address_ul">
          <li className="tyc_fristli">我的购物车</li>
          <li className="tyc_middleli">确认订单信息</li>
          <li className="tyc_lastli">订单提交成功</li>
        </ul>
        <h3>收货人信息</h3>
        <AddressComponent />
        <button id="saveArea">确认并设置为默认地址</button>
      </div>

      <div className="tyc_mallmessage">
        <h3>商品信息</h3>
        <table border="1">
          <thead>
            <tr>
              <th className="tyc_mallName">
                <span>爱果果水果店</span>
              </th>
              <th className="tyc_specification">规格</th>
              <th className="tyc_onePrice">单价</th>
              <th className="tyc_num">数量</th>
              <th className="tyc_sumOnePrice">金额</th>
            </tr>
          </thead>
          <tbody>
            {goods.map((value, key) => {
              return (
                <tr key={key}>
                  <td className="tyc_mail">
                    <img src={value.product_img} alt="" />
                    <span>{value.product_name}</span>
                  </td>
                  <td>{value.product_specification}</td>
                  <td>
                    ￥<i>{value.product_price}</i>
                  </td>
                  <td className="tyc_addsub_btn">
                    <div onClick={subNum}>-</div>
                    <input type="text" defaultValue={count} key={count} />
                    <div onClick={addNum}>+</div>
                  </td>
                  <td>
                    ￥<i>{value.product_price * count}</i>
                  </td>
                </tr>
              );
            })}
            <tr>
              <td colSpan="7" className="tyc_sumPrice">
                <span>运费</span>
                <strong>￥5.0</strong>
                <span>商品金额</span>
                <strong>￥108.0</strong>
                <span>商家合计</span>
                <strong>￥108.0</strong>
              </td>
            </tr>
          </tbody>
        </table>
        <OtherComponent />
      </div>
      <div className="tyc_delivery_time">
        <h3>次日达·礼拜五专享</h3>
        <div>
          <span>选择配送时间：</span>

          <RangePicker
            style={{ width: "300px" }}
            showTime={{ format: "HH:mm" }}
            format="YYYY-MM-DD HH:mm"
            onChange={onChange}
            onOk={onOk}
          />
        </div>
      </div>
      <div className="tyc_settlement">
        <p>
          <strong>实付金额：</strong>
          <em>￥2977</em>
        </p>
        <div>
          <i>订单完成后可获得积分：</i>
          <span>300积分</span>
        </div>
        <div>
          <button>提交订单</button>
        </div>
      </div>
    </div>
  );
}
